<template>
    <el-row :gutter="20">
<!--        右盒子-->
        <el-col :span="16"><div class="grid-content bg-purple">
            <el-row type="flex" class="row-bg" justify="space-around">
                <el-col :span="6"><div class="grid-content bg-purple">
                    <el-card class="box-card">
                        <label>用户总数:</label>
                        <span :model="userTotal">{{userTotal}}</span>
                    </el-card>
                </div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light">
                    <el-card class="box-card">
                        <label>会议室总数:</label>
                        <span :model="RoomTotal">{{RoomTotal}}</span>
                    </el-card>
                </div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple">
                    <el-card class="box-card">
                        <label>预定记录总数:</label>
                        <span :model="RecordTotal">{{RecordTotal}}</span>
                    </el-card>

                </div></el-col>
            </el-row>
        </div></el-col>
        <el-col :span="16"><div class="grid-content bg-purple">
            <el-row type="flex" class="row-bg" justify="space-around">
                <el-col :span="6"><div class="grid-content bg-purple">
                    <el-card class="box-card">
                        <label>空闲房间总数:</label>
                        <span :model="ValiaRoomTotal">{{ValiaRoomTotal}}</span>
                    </el-card>
                </div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light">
                </div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple">
                </div></el-col>
            </el-row>
        </div></el-col>
    </el-row>

</template>

<script>
    export default {
        name: "AdminIndex",
        data(){
            return{
                userTotal:0,
                RoomTotal:"",
                RecordTotal:"",
                ValiaRoomTotal:""
            }
        },
        mounted() {
            this.getRecordPage();
            this.getRoomPage();
            this.getUserPage();
            this.getValiaRoomPage();
        },
        methods:{
            getUserPage(){
                this.$axios({
                    method:"post",
                    url:"http://localhost:80/user/getUserDataPage",
                    params:{
                        current:1,
                        size:5
                    }
                }).then(res=>{
                    console.log(res)
                    this.pageSize = res.data.data.size
                    this.total = res.data.data.total
                    this.userTotal = res.data.data.total
                })
                // console.log(res)
            },
            getRoomPage(){
                this.$axios({
                    method:"post",
                    url:"http://localhost:80/conferenceroom/selectAllRoomPage",
                    params:{
                        current:1,
                        size:5
                    }
                }).then(res=>{
                    console.log(res)
                    this.pageSize = res.data.data.size
                    this.RoomTotal = res.data.data.total
                    this.roomList= res.data.data.records
                })
                // console.log(res)
            },
            getRecordPage() {
                this.$axios({
                    method:"post",
                    url:"http://localhost/orderrecord/getOrderList",
                    params:{
                        current:1,
                        size:5
                    }
                }).then(res =>{
                    console.log(res)
                    this.tableData = res.data.data.records;
                    let total = res.data.data.total
                    this.RecordTotal = total
                    this.pageSize = res.data.data.size
                })
            },
            getValiaRoomPage(){
                this.$axios({
                    method:"post",
                    url:"http://localhost:80/conferenceroom/selectIsUsePage",
                    params:{
                        current:1,
                        size:5
                    }
                }).then(res=>{
                    console.log(res)
                    this.pageSize = res.data.data.size
                    this.ValiaRoomTotal = res.data.data.total
                    this.tableData= res.data.data.records
                })
                // console.log(res)
            }
        }
    }
</script>

<style scoped>
        .box-card{
            font-size: 30px;
            margin-top: 20px;
        }
        label{
            color: dodgerblue;
        }
        span{
            color: orangered;
        }
</style>
